<template>
  <div class="yy-qrcode-manage">
    <!--列表-->
    <div class="yy-goods-cateogory-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          设备二维码列表
        </p>
        <Form ref="formInline" :model="formSearch"  inline>
            <FormItem prop="user">
              <Input type="text" v-model="formSearch.dName" placeholder="设备名称"></Input>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="formSearch.spec" placeholder="规格型号"></Input>
            </FormItem>
            <FormItem prop="user">
              <Input type="text" v-model="formSearch.dNewNum" placeholder="设备编码"></Input>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.daNum" @on-change="changeHospitalArea(formSearch.daNum)" placeholder="请选院区">
                <Option value="">请选择</Option>
                <Option v-for="(item,index) in hospitalArea" :value="item.daNum" :key="index">{{item.daName}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.ddName" placeholder="请选择部门">
                <Option value="">请选择</Option>
                <Option v-for="(item,index) in department" :value="item.ddNum" :key="index">{{item.ddName}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.dsNum" @on-change="changeKnowledgeClassification(formSearch.dsNum)" placeholder="请选择设备系统">
                <Option value="">请选择</Option>
                <Option v-for="(item,index) in knowledgeClassification" :value="item.dsNum" :key="index">
                  {{item.dsName}}
                </Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.dcNum" @on-change="changeStorage(formSearch.dcNum)" placeholder="请选择设备类别">
                <Option value="">请选择</Option>
                <Option v-for="(item,index) in equipmentCategory" :value="item.dcNum" :key="index">{{item.dcName}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.status" placeholder="请选择设备状态">
                <Option value="">请选择</Option>
                <Option value="1">正常</Option>
                <Option value="2">维修</Option>
                <Option value="3">报废</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.storageNum" @on-change="changeStorage(formSearch.storageNum)" placeholder="请选择后勤部门">
                <Option value="">请选择</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" v-model="formSearch.storageNum" @on-change="changeStorage(formSearch.storageNum)" placeholder="请选择维修部门">
                <Option value="">请选择</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <DatePicker type="date" placeholder="安装起始时间" style="width: 200px"  v-model="formSearch.st" :options="startTimeOption" @on-change="onStartTimeChange"></DatePicker>
            </FormItem>
            <FormItem prop="user">
              <DatePicker type="date" placeholder="安装结束时间" style="width: 200px" v-model="formSearch.et" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
            </FormItem>
          </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSearch()">查询</Button>
            </FormItem>
             <FormItem>
              <Button @click="handleReset" type="primary" class="button">重置</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleAdd()">新增</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleExecl()">导出</Button>
            </FormItem>
        </Form>
        <Divider> 设备二维码 </Divider>
        <div class="qrcode-list" align="center">
          <ul>
            <li class="qrcode-list-li" v-for="(item,index) in data" :key="index">
              <Card class="card">
                <p slot="title">
                    <Icon type="ios-book-outline" />
                    设备信息
                </p>
                <ul class="qrcode-list-card-left">
                  <li class="qrcode-list-card-length"><label>设备名称：</label>{{item.dName}}</li>
                  <li><label>设备编号：</label>{{item.dNewNum}}</li>
                  <li class="qrcode-list-card-length"><label>设备地址：</label>{{item.installAddress}}</li>
                </ul>
                <div class="qrcode-list-card-right">
                  <img class="contract-upload-list-qrcode" :src="imgUrl+item.dNum">
                </div>
              </Card>
            </li>
          </ul>
        </div>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <!--详情-->
    <!--添加/编辑-->
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import mixin from "@/mixin/date-mixin";

export default {
  name: "yy-qrcode-manage",
  mixins: [mixin],
  data() {
    return {
      i18n: i18n,
      currentData: "",
      detailsModal: false,
      imgUrl: "http://218.70.30.134:32537/ApService/showQR.aspx?asc=",
      type: "list",
      page: {
        total: 0,
        pageSize: 20
      },
      formSearch: {
        dName: "",
        spec: "",
        dNewNum: "",
        daNum: "",
        ddName: "",
        dsNum: "",
        dcNum: "",
        st: "",
        et: "",
        status: "",
        userID: "",
        userName: "",
        b_UserRole: ""
      },
      editFormInLine: {},
      editFormRuleInline: {
        cateNum: ValidatorRule.require,
        cateName: ValidatorRule.require
      },
      columns: [
        {
          title: "类别编号",
          key: "cateNum"
        },
        {
          title: "类别名称",
          key: "cateName"
        },
        {
          title: "创建人 ",
          key: "createUser"
        },
        {
          title: "创建时间 ",
          key: "createTime"
        },
        {
          title: "备注 ",
          key: "cateRemark"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.details(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.index);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delete(params.index, params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [],
      hospitalArea: [],
      department: [],
      knowledgeClassification: [],
      equipmentCategory: []
    };
  },

  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
    this.initClassification();
    this.inithospitalArea();
    this.handleSearch();
  },

  computed: {},

  methods: {
    //院区选择
    inithospitalArea() {
      let obj = {
        userID: "",
        userName: "",
        b_UserRole: ""
      };
      this.gethospitalArea(obj);
    },

    gethospitalArea(obj) {
      API.gethospitalArea(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.hospitalArea = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    //设备系统分类
    initClassification() {
      let obj = {
        userID: "",
        userName: "",
        b_UserRole: ""
      };
      this.getClassification(obj);
    },

    getClassification(obj) {
      API.getClassification(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.knowledgeClassification = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changeHospitalArea(num) {
      let obj = {
        dsNum: num,
        userID: "",
        userName: "",
        b_UserRole: ""
      };
      this.getDepartment(obj);
    },

    //部门选择
    getDepartment(obj) {
      API.getDepartment(obj)
        .then(res => {
          if (res.code == 200) {
            let dataLoc = res.data;
            this.department = dataLoc.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changeKnowledgeClassification(num) {
      let obj = {
        dsNum: num,
        userID: "",
        userName: "",
        b_UserRole: ""
      };
      this.getEquipmentCategory(obj);
    },

    //获取设备类别
    getEquipmentCategory(obj) {
      API.getEquipmentCategory(obj)
        .then(res => {
          if (res.code == 200) {
            let dataLoc = res.data;
            this.equipmentCategory = dataLoc.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handleSearch() {
      let obj = this.formSearch;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.formSearch = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            if (data != null) {
              this.page.total = data.total;
              this.page.pageSize = data.pageSize;
              this.data = data.list;
              for (var i = 0; i < data.length; i++) {
                data;
              }
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.data = [];
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changePage(pageNum) {
      let obj = this.formSearch,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = obj;
      this.getList(obj);
    },

    goBack() {
      this.type = "list";
    },

    handleAdd() {
      this.type = "add";
      this.handleReset();
    },

    handleReset() {
      this.$refs.editForm.resetFields();
    }
  }
};
</script>
<style lang="less" >
@import "./yy-qrcode-manage.less";
</style>
